import React,{useMemo} from "react";
import { AgGridReact } from "ag-grid-react";
import { AG_GRID_LOCALE_CN } from '@ag-grid-community/locale';

// 表格区域组件
export default function DynGrid(props) {
    const { rowData, columnDefs, loading, theme } = props;

    

    // 默认列配置
    const defaultColDef = useMemo(() => {
        return {
            flex: 1,                           // 弹性宽度
            minWidth: 130,                     // 最小宽度
            enableValue: true,                 // 启用值显示
            enableRowGroup: true,              // 启用行分组
            enablePivot: true,                 // 启用透视功能
            filter: true,                      // 启用过滤功能
        };
    }, []);

    
    // 自动分组列配置
    const autoGroupColumnDef = useMemo(() => {
        return {
            minWidth: 200,                     // 最小宽度
            pinned: "left",                    // 固定在左侧
        };
    }, []);
    
    // 表格区域样式
    const gridAreaStyle = { flex: 1, padding: 20, background: '#fff', boxSizing: 'border-box' };
    return (
        <div style={gridAreaStyle}>
            <div className={theme} style={{ height: '100%', width: '100%' }}>
                <AgGridReact
                    rowData={rowData}
                    columnDefs={columnDefs}
                    defaultColDef={defaultColDef}  // 默认列配置
                    autoGroupColumnDef={autoGroupColumnDef}  // 自动分组列配置
                    pivotMode={true}               // 启用透视模式
                    pivotPanelShow={"always"}      // 始终显示透视面板
                    loading={loading}
                    localeText={AG_GRID_LOCALE_CN}
                    sideBar={['columns', 'filters']}
                />
            </div>
        </div>
    );
} 